<template>
	<div class="questionnaire-box">
		<!--图片  -->
		<div class="questionnaire-img">
			<img class="img" src="../../static/questionnaire/question-img.png" alt="" />
		</div>
		<!-- 表单 -->
		<div class="questionnaire-form">
			<!-- 姓名 -->
			<div class="input-item">
				<div class="input-title">
					<span>*</span>
					<span>姓名</span>
				</div>

				<div class="intpu-content">
            <tm-input v-model="formData.name" placeholder="请输入姓名"></tm-input>
				</div>
			</div>
			<!-- 年龄 -->
			<!-- <div class="input-item">
        <div class="input-title">
          <span>*</span>
          <span>年龄</span>
        </div>
        <div class="intpu-content">
          <tm-input v-model="test" placeholder="请输入年龄"></tm-input>
        </div>
      </div> -->
			<div class="input-item">
				<div class="input-title">
					<span>*</span>
					<span>年龄</span>
				</div>
				<div class="intpu-content">
					<div class="code">
						<div class="input">
							<tm-input type="number" v-model="formData.age" placeholder="请输入年龄"></tm-input>
						</div>
						<div class="button">
							<span>岁</span>
						</div>
					</div>
				</div>
			</div>
			<!-- 性别 -->
			<div class="input-item sex">
				<!-- 男 -->
				<div class="character-selection" @click="selectCharacter('1')">
					<label class="character">
						<input type="radio" name="gender" v-model="formData.sex" class="radio-input" value="1" />
						<!-- 编写内部内容 -->
						<div v-if="!shwosex" class="character-box">
							<div class="left">
								<img src="../../static/questionnaire/boy.png" alt="Character 1" />
							</div>
							<div class="right">
								男
							</div>
						</div>

						<div v-else class="character-box2">
							<div class="left">
								<img src="../../static/questionnaire/boy.png" alt="Character 1" />
							</div>
							<div class="right">
								男
							</div>
						</div>
					</label>
				</div>
				<!-- 女 -->
				<div class="character-selection" @click="selectCharacter('2')">
					<label class="character">
						<input type="radio" name="gender" v-model="formData.sex" class="radio-input" value="2" />
						<!-- 编写内部内容 -->
						<div v-if="shwosex" class="character-box">
							<div class="left">
								<img src="../../static/questionnaire/girl.png" alt="Character 2" />
							</div>
							<div class="right">
								女
							</div>
						</div>

						<div v-else class="character-box2">
							<div class="left">
								<img src="../../static/questionnaire/girl.png" alt="Character 2" />
							</div>
							<div class="right">
								女
							</div>
						</div>
					</label>
				</div>
			</div>
			<!-- 手机号码 -->
			<div class="input-item">
				<div class="input-title">
					<span>*</span>
					<span>手机号码</span>
				</div>
				<div class="intpu-content">
					<tm-input type="number" v-model="formData.mobilePhone" placeholder="请输入手机号码"></tm-input>
				</div>
			</div>
			<!-- 验证码 -->
			<div class="input-item-code">
				<div class="input-item">
					<div class="input-title">
						<span>*</span>
						<span>短信验证码</span>
					</div>
					<div class="intpu-content">
						<div class="intpu-content">
							<tm-input type="number" v-model="formData.code" placeholder="验证码"></tm-input>
						</div>
					</div>
				</div>
				<div class="button">
					<button @click="startCountdown"
						:disabled="countdown > 0">{{ countdown > 0 ? ` ${countdown} ` : '获取' }}</button>
				</div>
			</div>
		</div>
		<!-- 下一步按钮 -->
		<button class="next-btn" @click="onNextStep">下一步</button>
		<!-- --- -->
		<tm-message ref="msg" :lines="2"></tm-message>
	</div>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import tmMessage from '@/tmui/components/tm-message/tm-message.vue'
	import tmInput from '@/tmui/components/tm-input/tm-input.vue'
  import tmFormItem from '@/tmui/components/tm-form-item/tm-form-item.vue'
  import tmForm from '@/tmui/components/tm-form/tm-form.vue'
	import { getCode, addQuestionnaire } from '@/apis'
	const msg = ref<InstanceType<typeof tmMessage> | null>(null)


	const formData = ref({
		shareId: '',
		name: '',
		code: '',
		age: '',
		sex: '1',
		mobilePhone: '',
	})
	const shwosex = ref(true)
	const selectCharacter = (gender) => {
		formData.value.sex = gender;
		if (gender === '2') {
			shwosex.value = false 
		}else{
			shwosex.value = true 
		}
	}


	const countdown = ref(0);

	const startCountdown = async () => {
		//发送验证码
		const data = await getCode({ mobilePhone: formData.value.mobilePhone })
		console.log(data);
		if (data.code === 0) {
			msg.value.show({ text: data.message, model: 'success' })
			countdown.value = 60;
			const timer = setInterval(() => {
				countdown.value--;
				if (countdown.value === 0) {
					clearInterval(timer);
				}
			}, 1000);
		} else {
			msg.value.show({ text: data.message, model: 'error' })
		}
	}
	const onNextStep = async () => {
		//下一步  
		const data = await addQuestionnaire(formData.value)
		if (data.code === 0) {
			uni.navigateTo({
				url: '/pages/questionnaire/questionnaire-ques?id=' + data.data
			})
		} else {
			msg.value.show({ text: data.message, model: 'error' })
		}
		// uni.redirectTo({
	}

	onLoad(() => {
		formData.value.shareId = getUrlSearch('inviteCode')
	});

	// 采用正则表达式获取地址栏参数
	const getUrlSearch = (name) => {
		// 未传参，返回空
		if (!name) return null;
		// 查询参数：先通过search取值，如果取不到就通过hash来取
		var after = window.location.search;
		after = after.substr(1) || window.location.hash.split('?')[1];
		// 地址栏URL没有查询参数，返回空
		if (!after) return null;
		// 如果查询参数中没有"name"，返回空
		if (after.indexOf(name) === -1) return null;
		var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
		// 当地址栏参数存在中文时，需要解码，不然会乱码
		var r = decodeURI(after).match(reg);
		// 如果url中"name"没有值，返回空
		if (!r) return null;
		return r[2];
	}
</script>

<style lang="scss" scoped>
	.questionnaire-box {
		height: 100vh;
		display: flex;
		flex-direction: column;

		//图片样式
		.questionnaire-img {
			width: 100%;
			height: 209px;

			.img {
				width: 100%;
				height: 209px;
			}
		}

		//表单
		.questionnaire-form {
			flex: 1;
			border-radius: 0px 0px 0px 0px;
			background: white;
			position: relative;
			padding: 22px 20px 0px 20px;

			.input-item-code {
				width: 100%;
				height: 48px;
				display: flex;
				align-items: center;

				.input-item {
					margin-bottom: inherit;
				}

				// button
				.button {
					margin-left: 11px;

					button {
						font-family: PingFangSC, PingFang SC;
						width: 72px;
						line-height: 48px;
						height: 48px;
						font-weight: 600;
						background: #F9700D;
						box-shadow: inset 0px -10px 7px 0px rgba(255, 153, 0, 0.5), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.58);
						border-radius: 10px;
						font-size: 14px;
						color: #FFFFFF;
					}
				}

			}

			.input-item {
				display: flex;
				width: 336px;
				height: 48px;
				background: #F8F8F8;
				border-radius: 10px;
				margin-bottom: 16px;
				box-sizing: border-box;
				padding: 0 20px;
				align-items: center;

				.input-title {
					// width: 50px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 16px;
					color: #333333;
					line-height: 22px;
					text-align: left;
					font-style: normal;
					box-sizing: border-box;
					padding-right: 30px;

					span:nth-child(1) {
						margin-right: 10px;
					}
				}

				.intpu-content {
					flex: 1;
					line-height: 48px;
					align-items: center;

					.code {
						width: 100%;
						display: flex;
						align-items: center;

						.input {
							flex: 1;
						}

						.button {
							width: 14px;
							height: 100%;

							span {
								font-weight: 400;
								font-size: 14px;
								color: #ccc;
							}
						}
					}
				}
			}
		}

		.questionnaire-form::before {
			content: "";
			height: 30px;
			width: 100%;
			background: white;
			position: absolute;
			top: -29px;
			left: 0;
			border-radius: 14px 14px 0px 0px;
			z-index: 8;
		}
	}

	//单选
	.sex {
		padding: 0 !important;
		background-color: inherit !important;
		height: auto !important;
		justify-content: space-between;
	}

	.character-selection {
		position: relative;
		width: 160px;
		height: 66px;
		background: #F8F8F8;
		border-radius: 10px;

		.character {
			width: 100%;
			height: 100%;
			position: relative;
			display: inline-block;

			.radio-input {
				display: none;
				width: 100%;
				height: 100%;
				cursor: pointer;
			}

			img {
				width: 100%;
				height: 100%;
				cursor: pointer;
			}

			.character-box2 {
				border: 2px solid orange;
				/* 边框样式为实线，边框颜色为橙色 */
				border-top-left-radius: 10px;
				/* 左上角圆角半径为10px */
				border-top-right-radius: 10px;
				/* 右上角圆角半径为20px */
				border-bottom-left-radius: 10px;
				/* 左下角圆角半径为15px */
				border-bottom-right-radius: 10px;
				/* 右下角圆角半径为5px */
				height: 100%;

				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 0 15px 0 20px;
				box-sizing: border-box;

				.left {
					height: 100%;
					display: flex;
					align-items: flex-end;

					img {
						width: 49px;
						height: 56px;
					}
				}
				.right {
					height: 100%;
					line-height: 66px;
					font-size: 14px;
					color: #ccc;
				}
			}

			// 性别内容
			.character-box {
				height: 100%;

				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 0 15px 0 20px;
				box-sizing: border-box;

				.left {
					height: 100%;
					display: flex;
					align-items: flex-end;

					img {
						width: 49px;
						height: 56px;
					}
				}

				.right {
					height: 100%;
					line-height: 66px;
					font-size: 14px;
					color: #ccc;
				}
			}
		}
	}

	.character .character input[type="radio"]:checked+.character-selection {
		border: 2px solid blue;
	}

	//下一步按钮
	.next-btn {
		position: relative;
		width: 336px;
		height: 48px;
		line-height: 48px;
		background: #F9700D;
		box-shadow: inset 0px -10px 7px 0px rgba(255, 153, 0, 0.5), inset 0px 0px 1px 0px rgba(255, 255, 255, 0.58);
		border-radius: 24px;
		font-weight: 600;
		font-size: 16px;
		color: #FFFFFF;
		bottom: 20px;
	}

	// 重置输入框背景颜色
	::v-deep .flex-col {
		background-color: #F8F8F8 !important;
	}
</style>